<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>珍爱网-我的珍爱</title>
    <%@ include file="core.jsp" %>
    <style>
        #faceImage {
            width: 370px;
            height: 370px;
        }
        #btn {

        }
        #fm {
            position: relative;
        }
        #btn {
            position: absolute;
            left:130px;
            top: 200px;
        }
        #face {
            display: none;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                $("#face").click();
            });
            // 预览上传的头像
            $("#face").change(function() {
                let faceImage = this.files[0];
                let reader = new FileReader();
                // 解析为base64
                reader.readAsDataURL(faceImage);
                // 解析完成后的回调
                reader.onload = function(e) {
                    $("#faceImage").attr("src", e.target.result);
                }
            });
        });
    </script>
</head>
<body>
<form action="${ctx}/n/upload" id="fm" enctype="multipart/form-data" method="post">
    <img id="faceImage" src="${ctx}/n/face?facepath=${sessionScope.userMain.facepath}" onerror="this.src='${ctx}/images/default_logo.png'">
    <input type="button" id="btn" value="从电脑选取照片">
    <input id="face" type="file" accept="image/jpeg,image/gif" name="file">
    <input type="submit" value="保存">
</form>
</body>
</html>
